<template>
	<view class="order-detail">
		<k-navbar title="订单详情"></k-navbar>
		<view class="box">
			<view class="shop">
				<view class="name u-font-28">{{detail.merchantName}}</view>
				<view class="u-flex">
					<view class="adress u-flex-1 u-font-24">{{detail.address}}</view>
					<image src="@/static/businessDistrict/导航.png" mode="" style="width:60rpx;height:60rpx"></image>
				</view>
			</view>
			<view class="shop-name">
				<image src="../../static/businessDistrict/shop.png" style="width:32rpx;height: 32rpx;border-radius: 10rpx;" mode=""></image>
				<view class="">{{detail.merchantName}}</view>
			</view>
			<view class="u-flex detail-box" v-if="detail.foodOrderProductVO">
				<image :src="detail.foodOrderProductVO.productImageUrl" style="width:148rpx;height: 148rpx;border-radius: 10rpx;" mode=""></image>
				<view class="u-flex-1 content">
					<view class="title">
						{{detail.foodOrderProductVO.productName}}
					</view>
					<!-- <view class="des">月售</view> -->
					<view class="u-flex u-row-between">
						<view class="price">
							￥{{detail.foodOrderProductVO.productUnitPrice}}
						</view>
						<view class="">
							X{{detail.buyNumber}}
						</view>
					</view>
				</view>
			</view>
			<u-cell-group>
				<u-cell-item v-if="detail.sweetDeductPrice" title="糖果抵扣" :value="`可用${detail.actualPaySweet}颗糖果抵用${detail.sweetDeductPrice}元`" :arrow="false" :value-style="cellActive"></u-cell-item>
				<u-cell-item v-if="detail.discountAmount" title="优惠券" :value="`减${detail.discountAmount}元`" :arrow="false" :value-style="cellActive"></u-cell-item>
				<u-cell-item title="备注" :value="detail.memo || '无'" :arrow="false"></u-cell-item>
				<u-cell-item title="订单编号" :value="detail.orderNo" :arrow="false">
					<image slot="right-icon" src="../../static/businessDistrict/copy.png" style="width:32rpx;height: 32rpx;padding-left: 10rpx;" mode="" @click="copyOrderNo"></image>
				</u-cell-item>
				<u-cell-item title="手机号" :value="detail.userPhone" :arrow="false"></u-cell-item>
				<u-cell-item title="下单时间" :value="detail.orderTime" :arrow="false"></u-cell-item>
				<u-cell-item title="总价" :value="`￥${detail.totalAmount}`" :arrow="false"></u-cell-item>
			</u-cell-group>
			<view class="write-off">
				<text>核销码：</text>
				<text>{{detail.writeOffCode}}</text>
			</view>
			<canvas v-show="show" class="write-off-img" canvas-id="couponQrcode"></canvas>
			<view v-if="show" class="color-light">请向商家展示此核销码或出示购买人手机号</view>
		</view>
	</view>
</template>

<script>
import kNavbar from '@/components/navbar/index'
const qrCode = require('@/components/QRCode.js')
export default {
	components:{
		kNavbar
	},
	data() {
		return {
			show: true,
			id: '',
			detail: {},
			cellActive: {
				'color': '#FF6600'
			}
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.getData()
	},
	methods: {
		couponQrCode() {
			let _this=this;
			new qrCode('couponQrcode', {
				text: this.detail.writeOffCode,
				width: 130,
				height: 130,
				colorDark: "#333333",
				colorLight: "#FFFFFF",
				correctLevel: qrCode.CorrectLevel.H
			})
		},
		getData() {
			this.$u.api.getFoodOrderDetail({
				id: this.id
			}).then(res => {
				if(res.code == 0) {
					this.detail = res.data || {}
					this.couponQrCode()
				} else {
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
		copyOrderNo() {
			uni.setClipboardData({
			    data: this.detail.orderNo,
			    success: function () {
			        uni.showToast({
			        	icon:'none',
			            title: '复制成功'
			        });
			    }
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.order-detail {
		padding-top: 30rpx;
		margin: 15rpx 30rpx;
		padding-bottom: 50rpx;
		background-color: #FFFFFF;
		.box {
			padding-bottom: 50rpx;
			box-shadow: 0rpx 9rpx 26rpx 1rpx rgba(0, 0, 0, 0.11);
			background-color: #FFFFFF;
		}
		.shop {
			padding: 30rpx 20rpx;
			border-bottom: 2rpx solid #F0F0F0;
			color: #000000;
			font-weight: bold;
		}
		.shop-name {
			display: flex;
			padding: 20rpx 20rpx 0 20rpx;
			color: #404646;
			font-size: 24rpx;
			image {
				margin-right: 10rpx;
			}
		}
		.detail-box {
			padding: 30rpx 30rpx;
			margin-bottom: 30rpx;
			display: flex;
			
			.content {
				margin-left: 20rpx;
				flex-direction: column;
				justify-content: space-around;
				height: 150rpx;
			}
			.price {
				color: #FF6600;
				font-size: 30rpx;
			}
			.des {
				margin-top: 8rpx;
				color: #999999;
				font-size: 24rpx;
			}
		}
		.write-off {
			margin: 20rpx 0;
			text-align: center;
		}
		.write-off-img {
			width: 260rpx;
			height: 260rpx;
			display: block;
			margin: 0 auto 30rpx auto;
		}
		
		.color-light {
			text-align: center;
			color: #999999;
		}
	}
</style>
